<template>
    <div>
        <NavTop :style="headColor"></NavTop>
        <HomeTop></HomeTop>
        <div class="home-main padding">
            <HomeCarousel></HomeCarousel>
            <HomeCard v-for="item, index in 30" :key="index"></HomeCard>
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/nav-top'
import HomeTop from './home-top'
import HomeCarousel from './home-carousel'
import HomeCard from './home-card'
export default {
    name: 'home',
    components: {
        HomeTop,
        HomeCarousel,
        HomeCard,
        NavTop
    },
    data() {
        return {
            // 导航栏颜色
            headColor: "background-color: Transparent; color: white"
        }
    },
    methods: {
        //滚动事件
        handleScroll() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            console.log(scrollTop)
            if (scrollTop >= 115) this.headColor = "background-color: #fff; color: #000; box-shadow: 0 2px 4px #00000014;"
            else this.headColor = "background-color: Transparent; color: white"
        },
    },
    mounted() {
        // 向页面添加股东事件
        window.addEventListener('scroll', this.handleScroll, true);
    },
    destroyed() { //离开这个界面之后，删除滚动事件，不然容易除bug
        window.removeEventListener('scroll', this.handleScroll)
    },

}
</script>

<style scoped>
.padding {
    padding: 0 64px;
    box-sizing: border-box;
}

.home-main {
    display: grid;
    position: relative;
    width: 100%;
    grid-column: span 5;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
}
</style>